<template>
  <div class="w-full h-full">
    <div class="flex justify-center items-center gap-2 mt-1">
      <div
        :class="[
          'flex items-center',
          isChief ? 'ml-[-20px] ' : '',
          isChief && click ? 'cursor-pointer' : ''
        ]"
        @click="
          () => {
            if (isChief && click) click();
          }
        "
      >
        <img
          :class="[click ? 'cursor-pointer' : '']"
          :src="icon"
          class="icon"
          width="24"
          height="24"
          @click="
            () => {
              if (!isChief && click) click();
            }
          "
        />
        <Badge
          :count="displayNoticeNum"
          :show-zero="false"
          style="height: 16px; line-height: 16px; min-width: 16px; font-size: 10px"
        >
          <span :class="['ml-[3px] text-[14px] font-light', isChief ? 'menu-chief' : '']">{{
            title
          }}</span>
        </Badge>
      </div>
      <div class="relative w-[18px] h-[18px]">
        <div class="absolute left-0 top-0 w-full h-full">
          <img
            v-if="!!status"
            :src="statusIconMap[status]"
            :class="[status == 'Loading' ? 'rotating-image' : '']"
            :alt="status.toLowerCase()"
            :title="status == 'Error' ? message : ''"
          />
          <slot />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Badge } from 'ant-design-vue';
import { computed } from 'vue';
import type { WorkflowInputProperties } from '@main/pages/workflow/types/menu-item';
import Loading from '@main/assets/images/workflow/loading.webp';
import Success from '@main/assets/images/workflow/success.webp';
import Error from '@main/assets/images/workflow/error.webp';
import Warning from '@main/assets/images/workflow/warning.webp';

defineOptions({ name: 'WorkflowMenuItemProperties' });

// 定义props
const props = defineProps({
  icon: {
    type: String,
    required: true
  },
  title: {
    type: String,
    required: true
  },
  isChief: {
    type: Boolean,
    default: false
  },
  status: {
    type: String as PropType<'Loading' | 'Success' | 'Error' | 'Warning'>
  },
  message: {
    type: String
  },
  noticeNum: {
    type: [String, Number],
    default: 0,
    validator: (value: string | number) => {
      const num = Number(value);
      return !isNaN(num) && num >= 0;
    }
  },
  inputArray: {
    type: Array as PropType<WorkflowInputProperties[]>,
    required: true
  },
  click: {
    type: Function,
    default: null
  }
});

// 使用正确的图片路径
const statusIconMap = {
  Loading,
  Success,
  Error,
  Warning
};

// 计算属性处理通知数字显示
const displayNoticeNum = computed(() => {
  const num = Number(props.noticeNum);
  return num > 0 ? num : undefined;
});
</script>
